<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../styles/personalAccount.css">
    <title>Личный кабинет</title>
</head>

<body>
    <div class="personalAccount">
        <div class="personalAccount__container">
            <div class="personalAccount__head">
                <div class="personalAccount__head__title">
                    <p>Личный кабинет</p>
                    <details>
                        <summary></summary>
                        <nav class="menu">
                            <a href="./package.html">Изменить пакет <img src="../img/tenge.png" alt="tenge"></a>
                            <a href="./settingAccount.html">Настройки профиля <img src="../img/setting.png" alt="setting" /></a>
                            <a href="#link">Выход<img src="../img/logout.png" alt="logout" /></a>
                        </nav>
                    </details>
                </div>
                <div class="personalAccount__head__bottom">
                    <h1>Сержан Смаков</h1>
                    <p>Эконом пакет</p>
                </div>
            </div>
            <div class="personalAccount__bottom__block">
                <div class="bottom__block__container">
                    <div class="balance">
                        <p>485 000<span>&#8376;</span></p>
                    </div>
                    <div class="balance__bottom">
                        <div class="remained">
                            <p>Осталось:</p>
                            <p>300 000<span>&#8376;</span></p>
                        </div>
                        <div class="save_up">
                            <p><a href="./saveUpAnother.html">Накопить другому:</a> </p>
                            <a href="./saveUpAnother.html"><img class="save_up__img" src="../img/plus.png" alt="plus" width="30" height="30"></a>
                       
                        </div>
                    </div>
                    <div class="payment__calendar">
                        <div class="payment__calendar__container">
                            <p>Календарь платежей</p>
                            <div class="payment__calendar__cards">
                                <div class="payment__calendar__card">
                                    <p>Январь</p>
                                    <div class="check_img__block">
                                        <img class="check_img" src="../img/check.png" alt="check" width="13" height="9">
                                    </div>

                                    <p>43 000 <span>&#8376;</span></p>
                                </div>


                                <div class="payment__calendar__card">
                                    <p>Февраль</p>
                                    <div class="check_img__block">
                                        <img class="check_img" src="../img/check.png" alt="check" width="13" height="9">
                                    </div>

                                    <p>43 000 <span>&#8376;</span></p>
                                </div>


                                <div class="payment__calendar__card">
                                    <p>Март</p>
                                    <div class="check_img__block">
                                        <img class="check_img" src="../img/check.png" alt="check" width="13" height="9">
                                    </div>

                                    <p>43 000 <span>&#8376;</span></p>
                                </div>
                            </div>

                            <div class="payment__calendar__cards">

                                <div class="payment__calendar__card">
                                    <p>Апрель</p>
                                    <div class="check_img__block">
                                        <img class="check_img" src="../img/check.png" alt="check" width="13" height="9">
                                    </div>

                                    <p>43 000 <span>&#8376;</span></p>
                                </div>

                                <div class="payment__calendar__card">
                                    <p>Май</p>
                                    <div class="check_img__block__mai">
                                        <img class="check_img" src="../img/check.png" alt="check" width="13" height="9">
                                    </div>

                                    <p>43 000 <span>&#8376;</span></p>
                                </div>

                                <div class="payment__calendar__card">
                                    <p>Июнь</p>
                                    <div class="check_img__block__aprel">
                                        <img class="check_img" src="../img/check.png" alt="check" width="13" height="9">
                                    </div>
                                    <p>43 000 <span>&#8376;</span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="replenish">
                         <!-- <p>Пополнить счет</p> -->
                         <img class="replenish__img" src="../img/replenish.png" alt="replenish__img">
                    </div>
                </div>
            </div>
        </div>
</body>

</html>